import { Meta, Story, Props, Preview } from '@storybook/addon-docs/blocks';

import Popover from '../src/components/popover/popover.vue';
import Button from '../src/components/button/button.vue';
import '../src/styles/storybook/popover.less';

<Meta title="数据展示/Popover 气泡卡片" component={Popover} />

# Popover 气泡卡片

### 引入组件

```js
import { Popover } from 'graceful-ui';
```

### 基本使用

支持`click`和`hover`两种方式触发, 默认为`click`

<Preview>
  <Story name="Basic 基本使用">
    {{
      components: { Popover, Button },
      template: `
        <div class="g-popover-demo basic">
          <Popover>
            <template slot="content" >
              <p>这里是提示内容</p>
              <p>这里是提示内容</p>
            </template>
            <Button type="primary">
              Click弹出
            </Button>
          </Popover>
          <Popover trigger="hover">
            <template slot="content">
              <p>这里是提示内容</p>
              <p>这里是提示内容</p>
            </template>
            <Button type="primary">
              Hover弹出
            </Button>
          </Popover>
        </div>`,
    }}
  </Story>
</Preview>

### 方位

可自定义弹出位置, 可选`top`, `left`, `bottom`, `right`

<Preview>
  <Story name="Position 方位">
    {{
      components: { Popover, Button },
      template: `
        <div class="g-popover-demo position">
          <div class="left">
            <Popover position="left" trigger="hover">
              <template slot="content">
                <p>这里是提示内容</p>
                <p>这里是提示内容</p>
              </template>
              <Button type="primary">
                左边显示
              </Button>
            </Popover>
          </div>
          <div class="top">
            <Popover position="top"  trigger="hover">
              <template slot="content">
                <p>这里是提示内容</p>
                <p>这里是提示内容</p>
              </template>
              <Button type="primary">
                上方显示
              </Button>
          </Popover>
          </div>
          <div class="bottom">
            <Popover position="bottom"  trigger="hover">
              <template slot="content">
                <p>这里是提示内容</p>
                <p>这里是提示内容</p>
              </template>
              <Button type="primary">
                底部显示
              </Button>
          </Popover>
          </div>
          <div class="right">
            <Popover position="right"  trigger="hover">
              <template slot="content">
                <p>这里是提示内容</p>
                <p>这里是提示内容</p>
              </template>
              <Button type="primary">
                右边显示
              </Button> 
            </Popover>
          </div>
        </div>`,
    }}
  </Story>
</Preview>

## API

<Props of={Popover} />
